import React from 'react'
import { Card, Button, Table, Divider, Row, Col, Modal, Form, Input } from 'antd'
import DescriptionList from 'components/DescriptionList'
import styles from './index.less'
import {
  contractOrderType,
  productType,
  contractOrderStatus,
  contractActionType,
  contractChangeType,
  contractChangeBusinessType,
  contractChangeReason
} from 'utils/enumConfig'
import moment from 'moment'
import { LwjDownload } from 'components';

const FormItem = Form.Item
const {TextArea} = Input
const AuditModal = ({
                      currentItem, dispatch, form: {
    getFieldDecorator,
    validateFields,
    setFieldsValue,
  }, ...auditModalProps
                    }) => {
  const {Description} = DescriptionList

  const formItemLayout = {
    labelCol: {
      xs: {span: 8, offset: 0},
      sm: {span: 8, offset: 0},
    },
    wrapperCol: {
      xs: {span: 8, offset: 0},
      sm: {span: 8, offset: 0},
    },
  }

  const toAudit = () => {
    validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'orderChangeApply/accept',
          payload: {
            id: currentItem.id,
            version: currentItem.version,
            values
          }
        })
        setTimeout(() => {
          dispatch({
            type: 'orderChangeApply/query',
            payload: {}
          })
        }, 1000)
      }
    })
  }

  const toDeny = () => {
    validateFields((err, values) => {
      values.version = currentItem.version
      if (!err) {
        dispatch({
          type: 'orderChangeApply/deny',
          payload: {
            id: currentItem.id,
            values
          }
        })
        setTimeout(() => {
          dispatch({
            type: 'orderChangeApply/query',
            payload: {}
          })
        }, 1000)
      }
    })
  }

  const toCancel = () => {
    dispatch({
      type: 'orderChangeApply/hideModal',
      payload: {}
    })
  }

  /** @namespace currentItem.des */
  /** @namespace currentItem.contractChangeReason */
  /** @namespace currentItem.provinceName */
  /** @namespace currentItem.cityName */
  /** @namespace currentItem.districtName */
  return (
    <div>
      <Modal {...auditModalProps}>
        <Card className={styles.card} bordered={false}>
          <DescriptionList size="large"
                           title="审核合同变更"
                           style={{marginBottom: 32}}>
            <Description term="合同编号">{currentItem.contractNum}</Description>
            <Description term="变更类型">{contractChangeType[(currentItem.contractChangeType)]}</Description>
            {currentItem.contractChangeType === 'AMOUNT' && <Description
              term="变更业务类型">{contractChangeBusinessType[(currentItem.contractChangeBusinessType)]}</Description>}
            {currentItem.contractChangeType === 'AMOUNT' && <Description
              term="合同金额">{currentItem.orderAmount}</Description>}
            {currentItem.contractChangeType === 'AMOUNT' && <Description
              term="变更金额">{currentItem.changeAmount}</Description>}
            {currentItem.contractChangeType === 'AMOUNT' && <Description
              term="变更后金额">{currentItem.changedAmount}</Description>}
            {currentItem.contractChangeType === 'AMOUNT' &&
            <Description term="变更原因">{contractChangeReason[(currentItem.contractChangeReason)]}</Description>}

            {currentItem.contractChangeType === 'INFORMATION' &&
            <Description term="收货人">{currentItem.consigneeName}</Description>}
            {currentItem.contractChangeType === 'INFORMATION' &&
            <Description term="收货人手机号">{currentItem.consigneePhoneNum}</Description>}
            {currentItem.contractChangeType === 'INFORMATION' && <Description
              term="收货人地址">{currentItem.provinceName} {currentItem.cityName} {currentItem.districtName} {currentItem.address}</Description>}

            <Description term="门店">{currentItem.salesDistributorName}</Description>
            <Description term="备注">{currentItem.des}</Description>
            {currentItem.contractChangeType === 'INFORMATION' &&  !_.isEmpty(currentItem.designAttachment) &&
            <Description term="设计方案">{<LwjDownload title={'点击下载'}
              targetUrl={currentItem.designAttachment || ''}/>}</Description>}
            {currentItem.contractChangeType === 'AMOUNT' &&
            <Description term="报价方案">{<LwjDownload title={'点击下载'}
              targetUrl={currentItem.quoteAttachment || ''}/>}</Description>}

          </DescriptionList>
        </Card>
        <Row>
          <Col span={24}>
            <FormItem {...formItemLayout} hasFeedback label='审核备注'>
              {getFieldDecorator('checkDes', {
                rules: [{required: true, message: '审核备注必须填写!'}],
              })(<Input/>)}
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" justify="center">
          <Col span={2}>
            <Button type="primary" onClick={() => toAudit()}>审核通过</Button>
          </Col>
          <Col span={2}>
            <Button type="primary" onClick={() => toDeny()}>审核不通过</Button>
          </Col>
          <Col span={2}>
            <Button onClick={() => toCancel()}>取消</Button>
          </Col>

        </Row>
      </Modal>
    </div>
  )
}

export default Form.create()(AuditModal)
